<template>
    <div class="standard_list">
        <Table ref="TabRef" :get-data="pageList" :form-data="formData" :remove="remove">
            <template v-slot:from_search>
                <el-form-item>
                    <el-input v-model="formData.name" placeholder="名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search" :icon="'Search'">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" @click="add" :icon="'Plus'"  v-permission="'sys:role:add'">新增</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="danger" @click="handleDelete" :icon="'Delete'" v-permission="'sys:role:delete'">删除</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button @click="handleSync()" :icon="'Refresh'" v-permission="'sys:role:sync'">同步</el-button>
                </el-form-item>
            </template>
            <template v-slot:columns>
                <el-table-column property="name" label="名称" />
                <el-table-column property="code" label="编码" />
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button size="small" @click="handleEdit(scope.row)" v-permission="'sys:role:edit'">
                            编辑
                        </el-button>
                        <el-button size="small" type="primary" @click="handleConfig(scope.row)" v-permission="'sys:role:config'">
                            配置权限
                        </el-button>
                        <el-button size="small" type="danger" @click="handleDelete(scope.row)" v-permission="'sys:role:delete'">
                            删除
                        </el-button>
                        <el-button size="small"  @click="handleSync(scope.row.code)" v-permission="'sys:role:sync'">
                            同步
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </Table>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue"
import Table from '@/components/Table.vue'
import { useRouter } from 'vue-router'
import { pageList, remove, sync } from '@/api/system/role'
import { ElNotification } from 'element-plus'

const router = useRouter()

const TabRef = ref(null)

const formData = reactive({
    name: undefined,
})

const search = () => {
    TabRef.value.queryData()
}
const add = () => {
    router.push('/role-add')
}

const handleDelete = (row) => {
    TabRef.value.handleDelete(row)
}
const handleEdit = (row) => {
    router.push("/role-edit/" + row.id)
}
const handleConfig = (row) => {
    router.push("/role-config/" + row.id)
}

const handleSync = (code) => {
    sync(code).then(data => {
        ElNotification({
            title: '提示',
            message: '同步成功',
            type: 'success',
        })
    })
}


</script>
<style scoped>
.standard_list {
    height: 100%;
}
</style>
